<template>
    <l-layout style="background: #f1f2f5;" :left="240" >
        <template #left >
            <l-panel title="查询字段" style="padding:0;" >
                <el-tree @check="handleQueryCheck"  default-expand-all show-checkbox ref="tree" node-key="id" :highlight-current="true"  :data="queryTree" >
                    <span class="lr-tree-node"  slot-scope="{ node }">
                        {{ node.label }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding:0;">
            <template #toolLeft >
                <div class="l-panel--item" size="mini">
                    <el-radio-group v-model="config.queryType" size="mini" >
                        <el-radio-button label="1">风格一</el-radio-button>
                        <el-radio-button label="2">风格二</el-radio-button>
                    </el-radio-group>
                </div>
            </template>
            <l-layout :left="320">
                <div class="l-rblock" >
                    <img style="width:100%;" :src="`${rootUrl}img/admin/query${config.queryType}.jpg`" >
                </div>
                <template #left>
                    <l-table
                        :dataSource="config.table.querys"
                        :columns="columns" 
                        :isSortable="true"
                        rowKey="id"
                        :isShowNum="false"
                        >
                        <template v-slot:width="scope">
                            <el-input size="mini" v-model="scope.row.width" ></el-input>
                        </template>
                        <template v-slot:isMinWidth="scope">
                            <el-switch size="mini"  v-model="scope.row.isMinWidth">
                            </el-switch>
                        </template>
                        <template v-slot:align="scope">
                            <el-select size="mini" v-model="scope.row.align">
                                <el-option
                                v-for="item in [{value:'left',label:'左'},{value:'center',label:'中'},{value:'right',label:'右'}]"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </l-table >
                </template>
                
            </l-layout>
           
        </l-panel>
    </l-layout>
</template>
<script>
export default {
    inject: ["pageCodeConfig"],
    props:['queryTree'],
    components:{

    },
    computed:{
        config(){
            return this.pageCodeConfig;
        }
    },
    data(){
        return {
            columns: [
                {label:'查询字段名',prop:'label',minWidth:'150'}
            ]
        };
    },
    created () {
    },
    methods:{
        handleQueryCheck($node,data){
            const addCols = data.checkedNodes.filter(t=>t.prop != undefined && this.config.table.querys.findIndex(t2=>t2.prop ==t.prop ) == -1)
            const removeCols = this.config.table.querys.filter(t=> data.checkedNodes.findIndex(t2=>t2.prop == t.prop) == -1)

            if(removeCols.length >0){
                this.config.table.querys = this.config.table.querys.filter(t=>removeCols.findIndex(t2=>t2.prop == t.prop) == -1)
            }
            
            if(addCols.length >0){
                this.config.table.querys.push(...addCols)
            }
            
        },
        setCheckedKeys(keys){
            this.$refs.tree.setCheckedKeys(keys)
        }
    }
}
</script>
